<template>
  <div class="baseMain">
    <div class="baseHaed">
      <el-button
          v-if="publicForm.isTitle"
          type="primary"
          size="small"
          @click="publicForm.showSearch=!publicForm.showSearch" class="showSearch"
      >
        <i
            :class="publicForm.showSearch ?`el-icon-caret-bottom`:`el-icon-caret-right`"
            class="opensearchs"
        >
        </i>
        <span class="opensearchs_more">{{ publicForm.title }}</span>
      </el-button>
      <slot name="formTableBtn"></slot>
    </div>
    <div class="baseform form_label_com" v-show="publicForm.showSearch">
      <template v-for="(itemsss,indexssss) in tableData" :key="indexssss">
        <!--
        <el-row :gutter="20">
                  <template v-for="(item,index) in publicForm.data" :key="index">
                    <el-col style="margin: 0" :span="item.colSpan">
                      <el-form-item :label="item.label" :prop="item.prop">
                        <template v-if="item.type === 'text'">
                          <el-input
                              v-model="itemsss[item.prop]"
                              :placeholder="item.placeholder"
                              :disabled="item.disabled"
                          >
                          </el-input>
                        </template>
                        <template v-else-if="item.type==='switch'">
                          <el-switch
                              v-model="itemsss[item.prop]"
                              :disabled="item.disabled"/>
                        </template>
                        <template v-else-if="item.type==='select'">
                          <el-select
                              class="lock_input"
                              v-model="itemsss[item.prop]"
                              :disabled="item.disabled  || detailsbool"
                              :filterable="item.isFilterable"
                              :isMultiple="item.isMultiple"
                              :clearable="item.clearable"
                              :placeholder="item.placeholder"
                              @change="formSelectChange($event,item,index)"
                          >
                            <el-option
                                v-for="(it,idx) in item.option"
                                :key="idx"
                                :label="it.label"
                                :value="it.value"
                            ></el-option>
                          </el-select>
                        </template>
                        <template v-else-if="item.type==='textarea'">
                          <el-input
                              type="textarea"
                              :rows="2"
                              :placeholder="item.placeholder"
                              v-model="itemsss[item.prop]">
                          </el-input>
                        </template>
                        <template v-else-if="item.type==='upload'">
                          <div style="display: flex">
                            <el-upload
                                v-if="!detailsbool || item.disabled"
                                class="upload-demo"
                                action
                                :before-upload="(file)=>{ beforeAvatarUpload(file,item,index)}"
                                :http-request="(file)=>{ httpRequest(file,item,index)}"
                                :file-list="item.imgUrlList"
                                list-type="picture"
                            >
                              <el-button type="primary" size="small">点击上传</el-button>
                              <template #tip>
                                <div class="el-upload__tip">{{ item.placeholder }}</div>
                              </template>
                            </el-upload>
                          </div>
                        </template>
                      </el-form-item>
                    </el-col>
                  </template>
                </el-row>-->
        <formColumn
          :columnData="publicForm.data"
          :columnModel="itemsss"
          :detailsbool="detailsbool"
        >
        </formColumn>
      </template>
    </div>
  </div>
</template>

<script>
import {getCurrentInstance, reactive} from "vue";
import {uploadFile} from "@/api/rules"
import formColumn from "@/components/common/formColumn";

export default {
  name: "formLabel",
  components: {
    formColumn
  },
  props: {
    publicForm: {
      type: Object,
      default: () => {
      }
    },
    detailsbool: {
      type: Boolean,
      default: false
    },
    // formData
    formData: {
      type: Object,
      default: () => {
      }
    },
    tableData: {
      type: Array,
      default: () => []
    }
  },
  setup(props, context) {
    const {proxy} = getCurrentInstance()
    let {formData} = reactive(props);
    const formSelectChange = (val, currentItem, $index) => {
      let obj = null;
      if (val != '') {
        obj = currentItem.option.find(item => item.value == val)
        if (obj != undefined && currentItem.propName != undefined) {
          formData[currentItem.propName] = obj.label
        }
      }
      context.emit('formSelectEmit', val, currentItem, $index, obj)
    }

    const beforeAvatarUpload = (file, row, index) => {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (formData.imgUrlList.length > 4) {
        proxy.$message({
          type: "error",
          message: "不能超过4张图片!"
        })
        return false;
      }
      if (!isJPG) {
        proxy.$message({
          type: "error",
          message: "请上传 JPG和PNG 格式的图片!"
        })

      }
      if (!isLt2M) {
        proxy.$message({
          type: "error",
          message: "上传图片大小不能超过 2MB!"
        })
      }
      return isJPG && isLt2M
    }
    const httpRequest = async (file, row, index) => {
      let postData = new FormData()
      postData.append('myFile', file.file)
      postData.append('type', 1)//商品照片
      const {data} = await uploadFile(postData)
      proxy.$message({
        type: "success",
        message: "上传成功!"
      })
      let filedata = {
        name: data.key,
        url: data.fileUrl
      }
      formData.imgUrlList.push(filedata)
    }
    return {
      formSelectChange,
      beforeAvatarUpload,
      httpRequest
    }
  },
  data() {
    return {}
  },
  created() {
  },
  mounted() {
  },

  methods: {},
  computed: {},
  watch: {},
  beforeDestroy() {
  },
  destroyed() {
  }
}
</script>

<style scoped lang="scss">
.baseMain {
  background: #fff;
  margin: 7px;
  padding: 5px 18px;

  .baseHaed {
    margin-bottom: 10px;
    position: relative;
  }
}
</style>